<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery获取元素的方法</title>
</head>
<body>
    <div id="root">
        <p class="a">家用电器</p>
        <p>日用百货</p>
        <ul>
            <li>one</li>
            <li class="a">two</li>
            <li>three</li>
            <li>four</li>
            <li id="five">five</li>
            <div>six</div>
            <li>seven</li>
            <li>eight</li>
            <li class="a">nine</li>
            <li>ten</li>
        </ul>
        <p class="a">数码产品</p>
        <p>电子产品</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        let five = $('#five')
        five.css('text-align','center')
        //prev()方法，用于获取前一个兄弟元素，该方法里面可以传选择器
        five.prev().css('color','red')
        // five.prev('div').css('color','red')
        five.prev().prev().css('color','green')
        //next()方法，用于获取后一个兄弟元素，该方法里面可以传选择器
        // five.next().css('color','blue')
        five.next('div').css('color','blue')
        //$('#five').next('div') === $('#five+div')
        $('#five+div').css('background','lightgray')
        //siblings()方法，用于获取同级的所有兄弟元素
        five.siblings().css('font-weight','bold')
        //$('#five~li')选择器：表示获取#five同级的下面的所有的li标签
        $('#five~li').css('font-size','20px')
        //parent()方法，用于获取父级元素
        five.parent().css('border','1px dashed black')
        five.parent().parent().css('border','1px solid orange')
        //parents()方法，用于获取所有的父级元素，该方法里面可以传选择器来获取指定的父级
        five.parents('#root').css('border-radius','10px')
        //children()方法，用于获取子元素
        five.parents('#root').children('.a').css('color','#ff5577')
        //find()方法，用于获取后代元素
        five.parents('#root').find('.a').css('background','#77ff98')
        //first()方法，用于获取第1个元素
        five.parents('#root').find('.a').first().css('font-size','20px')
        //first选择器的写法
        // five.parents('#root').find('.a:first').css('font-size','20px')
        //last()方法，用于获取最后一个元素
        five.parents('#root').find('.a').last().css('font-size','25px')
        //last选择器的写法
        // five.parents('#root').find('.a:last').css('font-size','25px')
        //eq()方法，用于获取指定下标的元素
        five.parents('#root').find('.a').eq(2).css('text-align','center')
        //eq选择器的写法
        // five.parents('#root').find('.a:eq(2)').css('text-align','center')
    </script>
</body>
</html>